<template>
  <input type="range" :value="inputValue" @input="input" :max="max" :min="min">
</template>

<script lang="ts" setup>
import {ref, watch} from 'vue'

const props = defineProps({
  value: {
    type: Number,
    default: 0
  },
  max: {
    type: Number,
    default: 100
  },
  min: {
    type: Number,
    default: 0
  },
})

const emit = defineEmits(['update:value'])

const inputValue = ref(0);

watch(() => props.value, () => {
  if (props.value !== inputValue.value) {
    inputValue.value = props.value
  }
}, {immediate: true})

function input(event) {
  inputValue.value = event.target.value
  emit('update:value', inputValue.value)
}
</script>

<style scoped lang="less">

</style>
